<template>
  <div class="hello" id="coupons" :style="{minHeight: currHeight + 'px'}">
    <!-- 导航栏 -->
    <div class="navBox">
      <van-nav-bar
      title="优惠卷"
      left-text="返回"
      right-text="•••"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
    </div>
    <!-- 优惠卷切换 -->
    <van-tabs v-model="activeName">
        <van-tab title="有效" name="a"> 
          <div class="couponsBox" v-for="(list,index) in lists" :key="index">
                <img :src="list.url" alt="">
                <p class="money">￥200</p>
                <p class="bankCard">储蓄卡抵用卷</p>
                <div class="writingContent">
                  <p>每名用户限用1张本卷</p>
                  <p>订单满899可用</p>
                  <p>精选品牌储蓄卡专用</p>
                </div>
                <p class="date">有效时间：2015-11-06至2015-11-17</p>
                <div class="useImmediately">
                    {{list.text}}
                    <img :src="list.src" alt="">
                </div>
            </div>
        </van-tab>
        <van-tab title="失效" name="b">
          <div class="couponsBox" v-for="(list,index) in lists" :key="index">
                <img :src="list.url" alt="">
                <p class="money">￥200</p>
                <p class="bankCard">储蓄卡抵用卷</p>
                <div class="writingContent">
                  <p>每名用户限用1张本卷</p>
                  <p>订单满899可用</p>
                  <p>精选品牌储蓄卡专用</p>
                </div>
                <p class="date">有效时间：2015-11-06至2015-11-17</p>
                <div class="useImmediately">
                    {{list.text}}
                    <img :src="list.src" alt="">
                </div>
            </div>
        </van-tab>
        <van-tab title="全部" name="c">
          <div class="couponsBox" v-for="(list,index) in lists" :key="index">
                <img :src="list.url" alt="">
                <p class="money">￥200</p>
                <p class="bankCard">储蓄卡抵用卷</p>
                <div class="writingContent">
                  <p>每名用户限用1张本卷</p>
                  <p>订单满899可用</p>
                  <p>精选品牌储蓄卡专用</p>
                </div>
                <p class="date">有效时间：2015-11-06至2015-11-17</p>
                <div class="useImmediately">
                    {{list.text}}
                    <img :src="list.src" alt="">
                </div>
            </div>
        </van-tab>
    </van-tabs>
    <!-- 优惠卷使用说明 -->
    <div class="explainBox">
      <span class="leftContent">抵用卷使用说明</span>
      <span class="rightImg">
        <img src="../assets/images/限时特惠/icon.png" alt="">
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Coupons',
  data () {
    return {
        activeName: 'a',
        lists:[
          {
            url:require("../assets/images/优惠券/coupon_1.png"),
            src:require("../assets/images/限时特惠/icon.png"),
            text:'马上使用',
          },
          {
            url:require("../assets/images/优惠券/coupon_2.png"),
            text:'优惠卷已过使用期限',
          },
          {
            url:require("../assets/images/优惠券/coupon_2.png"),
            text:'优惠卷已过使用期限',
          },
          {
            url:require("../assets/images/优惠券/coupon_2.png"),
            text:'优惠卷已过使用期限',
          },
          {
            url:require("../assets/images/优惠券/coupon_2.png"),
            text:'优惠卷已过使用期限',
          },
          {
            url:require("../assets/images/优惠券/coupon_2.png"),
            text:'优惠卷已过使用期限',
          },

        ],
        currHeight: ''
    }
  }, 
  methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  },
  mounted(){
      this.currHeight = document.documentElement.clientHeight
      window.onresize = () => {
          this.currHeight = document.documentElement.clientHeight
      }
  }
}
</script>

<style scoped lang='less'>

// 大背景
.hello{
  background: #f3f4f6;
  overflow: hidden;
}
// 导航栏
.navBox{
  width: 100%;
  height: 90px;
  position: fixed;
  z-index: 999999;
}
.van-nav-bar__content{
  height: 90px;
  background:rgba(48, 48, 50, );
  line-height: 90px;
  .van-nav-bar__text{
    color: #fff;
  }
  .van-nav-bar__title{
    color: #fff;
  }
  .van-icon{
    color: #fff;
  }
}
// 优惠卷
.couponsBox{
    width: 94%;
    height: 280px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    img{
      width: 100%;
    }
    .useImmediately{
      width: 100%;
      height: 60px;
      font-size: 22px;
      color: #8c8c8c;
      text-align: center;
      line-height: 60px;
      background: #fff;
      position: relative;
      img{
        width: 25px;
        position: absolute;
        right: 25px;
        top: 18px;
      }
  }
  .money{
    position: absolute;
    left: 20px;
    bottom:70px;
    font-size: 48px;
    color: #fff;
  }
  .writingContent{
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 38px;
    left: 180px;
  }
  .date{
    font-size: 20px;
    color: #fff;
    position: absolute;
    bottom: 60px;
    left: 180px;
  }
  .bankCard{
    font-size: 21px;
    color: #fff;
    font-weight: 600;
    position: absolute;
    right: 30px;
    top: 20px;
  }
}
// 使用说明
.explainBox{
  width: 100%;
  height: 120px;
  background: #fff;
  position: fixed;
  bottom: 0;
  padding: 45px 74px 0 74px;
  box-sizing: border-box;
  font-size: 28px;
  min-height: 120px;
  .leftContent{
    float: left;
  }
  .rightImg{
    float: right;
    img{
      width: 28px;
    }
  }
}
</style>
